<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../resources/bootstrap/css/bootstrap.css"/>
    <link rel="stylesheet" href="../resources/layui/css/layui.css"/>
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="../resources/js/jquery/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
    <script type="text/javascript" src="../resources/vue/vue.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../resources/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <link href="../resources/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="../resources/css/style.css" rel="stylesheet">
    <link href="../resources/css/exam.css" rel="stylesheet">
</head>
<header>
    <div class="logo">
        <h1>在线考试系统</h1>
    </div>
    <div class="navbar bs-docs-nav" role="banner">
        <div class="container" style="margin: 0  264px ;">
            <ul class="nav navbar-nav">
                <li class="nav-tabs">
                    <a href="main.html" style="font-size: 1.2em; width: 135px;"><i
                            class="glyphicon glyphicon-home"></i>&nbsp;首页</a>
                </li>
                <li>
                    <a href="/view/question/question-list" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list"></i>&nbsp;试题管理</a>
                </li>

                <li class="nav-tabs">
                    <a href="exampaper-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-list-alt"></i>&nbsp;试卷管理</a>
                </li>
                <li>
                    <a href="exam-list.html" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-indent-right"></i>&nbsp;考试管理</a>
                </li>
                <li>
                    <a href="/toUser.do" style="font-size: 1.2em;width: 130px;"><i
                            class="glyphicon glyphicon-user"></i>&nbsp;用户管理</a>
                </li>
                <li>
                    <a href="/toTag.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-random"></i>&nbsp;通用管理</a>
                </li>
                <li>
                    <a href="/toSystem.do" style="font-size: 1.2em;width: 132px;"><i
                            class="glyphicon glyphicon-cog"></i>&nbsp;系统设置</a>
                </li>
            </ul>
            <a href="/userLogout" style="position: absolute;right: 100px; top: 10px;"><i class=""></i>[注销]</a>
        </div>

    </div>
</header>

<div id="app" class="container">
    <div id="exam-content-left" style="width: 150px; position: absolute;left: 220px;top: 125px;">
        <ul class="nav nav-pills nav-stacked" style="font-size: 1.1em; margin-top: 100px; text-align: right;">

            <li>
                <a href="exampaper-list.html"> <i class="glyphicon glyphicon-th-list"></i> 试卷管理 </a>
            </li>
            <li>
                <a href="exampaper-add2.html"> <i class="glyphicon glyphicon-log-out"></i> 自动组卷 </a>
            </li>
            <li class="active">
                <a> <i class="glyphicon glyphicon-log-out"></i>教师选题 </a>
            </li>
        </ul>
    </div>
    <form class="layui-form" action="/ExamPage/addArtificialExamPaper" style="width: 600px; margin: 0 70px"
          method="post">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>创建试卷(教师选题)</legend>
        </fieldset>
        <div id="firstParts">
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">试卷名称</label>
                <div class="layui-input-block">
                    <input name="examPaperName" lay-verify="examPaperName" autocomplete="off" placeholder="试卷名称"
                           class="layui-input"
                           type="text">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">及格分数</label>
                <div class="layui-input-block">
                    <input name="passPoint" lay-verify="required|passPoint" placeholder="及格分数" autocomplete="off"
                           class="layui-input"
                           type="text" id="passPoint">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">组卷方式</label>
                <div class="layui-input-block">
                    <select lay-filter="aihao" name="examPaperType">
                        <option value="2" selected="">教师组卷</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">考试时间(分钟)</label>
                    <div class="layui-input-inline">
                        <input name="duration" lay-verify="required|duration" autocomplete="off" placeholder="分钟"
                               class="layui-input" type="text" style="margin-left: 10px">
                    </div>
                </div>
            </div>

            <div style="  margin-left:200px">
                <button class="layui-btn layui-btn-normal" lay-filter="demo1" type="button" id="goon">下一步</button>
            </div>

        </div>

        <div id="nextParts" style="display: none">

            <br/>

            <div class="btn-group table-controller-item">

                <button class="layui-btn" id="addChooseQuestionBtn" type="button"
                        style="font-size: 1.3em;">
                    <i class="fa fa-plus-square"></i> 添加选择题
                </button>

                <br/>
                <br/>
                <br/>

                <button class="layui-btn layui-btn-warm" id="addJudgementQuestionBtn" type="button"
                        style="font-size: 1.3em;">
                    <i class="fa fa-plus-square"></i> 添加判断题
                </button>

                <hr/>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">单选题目</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input id="questionCount" name="questionCount" value="0" autocomplete="off" class="layui-input"
                               type="text">
                    </div>
                    <div class="layui-form-mid">道 &nbsp;&nbsp;每道题</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input name="questionPoint" id="questionPoint" value="0" autocomplete="off" class="layui-input"
                               type="text"   lay-verify="required|point">
                    </div>
                    <div class="layui-form-mid">分</div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">判断题目</label>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input id="judgmentQuestionCount" name="judgmentQuestionCount" value="0" autocomplete="off"
                               class="layui-input" type="text">
                    </div>
                    <div class="layui-form-mid">道 &nbsp;&nbsp;每道题</div>
                    <div class="layui-input-inline" style="width: 100px;">
                        <input name="judgmentQuestionPoint" id="judgmentQuestionPoint"  value="0" autocomplete="off"
                               class="layui-input" type="text"  lay-verify="required|point">
                    </div>
                    <div class="layui-form-mid">分</div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">总分</label>
                    <div class="layui-input-inline">
                        <input name="totalPoint" id="totalPoint" lay-verify="required|totalpoint" autocomplete="off"
                               value="0" readonly
                               class="layui-input" type="text" style="margin-left: 10px">
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label" style="width: 100px">试卷分类</label>
                    <div class="layui-input-inline">
                        <select id="field" name="field">
                            <option value="0">请选择科目</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-normal" id="backoff">上一步</button>
                    <button class="layui-btn layui-btn-normal" id="examPaperSubmit" type="submit" lay-filter="demo1"
                            lay-submit="">立即提交
                    </button>

                </div>
            </div>

            <div style="position: relative; left: 600px; top:-450px" id="helpMarker">
                <a id="showChooseQuestion" onclick="showChooseQuestion()">
                    <button type="button" class="layui-btn">显示添加的选择题</button>
                </a>
                <div id="containChooseQuestion" style="display: none"></div>
                <br>
                <a id="showJudgementQuestion" onclick="showJudgementQuestion()">
                    <button type="button" class="layui-btn layui-btn-warm">显示添加的判断题</button>
                </a>
                <div id="containJudgementQuestion" style="display: none; "></div>
            </div>

        </div>
    </form>
</div>
</body>
</html>
    <script type="text/javascript" src="../resources/layui/layui.all.js"></script>
    <script>
        //vue使用
        var app = new Vue({
            el: "#app",
            data: {
                result: [],
                fieldListresult: [],
                pointListresult: []
            }
        })

        //layui相关
        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            laydate.render({
                elem: '#date1'
            });


            //自定义验证规则
            form.verify({
                examPaperName: function (value) {
                    if (value.length < 3) {
                        return '试卷名称至少得3个字符';
                    }
                }
                , passPoint: [/^\+?[1-9][0-9]*$/, '及格分格式为正整数']
                , duration: [/^\d{1,3}$/, '考试时间过长,请重新输入']
                ,point:[/^\d{1,2}$/, '分数格式错误,分数设置过大']
                ,totalpoint:[/^\d{1,5}$/, '总数格式错误,请重新输入']
            });

        });

        //页面加载处理
        $(function () {

            getAllField();


            //表单验证郭瀚钰
            $("#examPaperSubmit").click(function () {
                var h1 = $("#containChooseQuestion").find(".layui-form-checkbox");
                var chooseStr = [];
                h1.each(function () {
                    if ($(this).hasClass("layui-form-checked")) {
                        chooseStr.push(1);
                    }
                });
                //判断题
                var h2 = $("#containJudgementQuestion").find(".layui-form-checkbox");
                var judgeStr = [];
                h2.each(function () {
                    if ($(this).hasClass("layui-form-checked")) {
                        judgeStr.push(1);
                    }
                });

                if (judgeStr.length == 0 & chooseStr == 0) {
                    layer.msg("试卷中未添加试题");
                    return false;
                }

                if($("#passPoint").val()>=$("#totalPoint").val()){
                    layer.msg("及格分数大于试卷总分,请重新填写");
                    return false;
                }

            });

            //点击下一步
            $("#goon").click(function () {
                $("#firstParts").toggle();
                $("#nextParts").toggle();
            })
            //点击返回上一步
            $("#backoff").click(function () {
                $("#firstParts").toggle();
                $("#nextParts").toggle();
            });


            //弹出选择题选择层 郭瀚钰
            $("#addChooseQuestionBtn").click(function () {
                $("#containChooseQuestion").css("display", "none");
                $("#containChooseQuestion").toggle();
                layer.open({
                    type: 2,
                    title: '选择选择题',
                    fix: false,
                    skin: 'demo-class',
                    maxmin: true,
                    offset: ['10px', '50px'],
                    shadeClose: true,
                    shade: 0.01,
                    area: ['600px', '800px'],
                    left: '100px',
                    content: 'artificial-ChooseQuestionList.html',
                    end: function () {
                        $("#containChooseQuestion").toggle();
                    }
                });
            });

            //弹出判断题选择层 郭瀚钰
            $("#addJudgementQuestionBtn").click(function () {
                $("#containJudgementQuestion").css("display", "none");
                $("#containJudgementQuestion").toggle();
                layer.open({
                    type: 2,
                    title: '选择判断题',
                    fix: false,
                    skin: 'demo-class',
                    maxmin: true,
                    offset: ['10px', '50px'],
                    shade: 0.01,
                    shadeClose: true,
                    area: ['600px', '800px'],
                    left: '100px',
                    content: 'artificial-JudgementQuestionList.html',
                    end: function () {
                        $("#containJudgementQuestion").toggle();
                    }
                });
            });


            //查询分类列表信息 郭瀚钰
            function getAllField() {
                $.ajax({
                    type: 'post',
                    url: '/getAllField',
                    dataType: 'json',
                    success: function (msg) {
                        $.each(msg, function (i, item) {
                            console.log(msg);
                            var str = "<option value='" + item.fieldId + "'>" + item.fieldName + "</option>";
                            $("#field").append(str);
                            layui.form.render();
                        });
                    }, error: function () {
                      //  alert("分类列表失败")
                    }
                })

            }


            //取消勾选后改变试题数
            $("#helpMarker").delegate("div .layui-form-checkbox span", "click", function () {
                //选择题
                var h1 = $("#containChooseQuestion").find(".layui-form-checkbox");
                var chooseStr = [];
                h1.each(function () {
                    if ($(this).hasClass("layui-form-checked")) {
                        chooseStr.push(1);
                    }
                });
                $("#questionCount").val(chooseStr.length);
                //判断题
                var h2 = $("#containJudgementQuestion").find(".layui-form-checkbox");
                var judgeStr = [];
                h2.each(function () {
                    if ($(this).hasClass("layui-form-checked")) {
                        judgeStr.push(1);
                    }
                });
                $("#judgmentQuestionCount").val(judgeStr.length);
                countTotalPoint();
            })

            //计算总分
            $("#judgmentQuestionCount").change(function () {
                countTotalPoint()
            });
            $("#judgmentQuestionPoint").keyup(function () {
                countTotalPoint()
            });
            $("#questionPoint").keyup(function () {
                countTotalPoint()
            });
            $("#questionCount").change(function () {
                countTotalPoint()
            });
        })

        //计算总分
        function countTotalPoint() {
            var totalPoint = parseInt($("#questionCount").val()) * parseInt($("#questionPoint").val())
                + parseInt($("#judgmentQuestionPoint").val()) * parseInt($("#judgmentQuestionCount").val());
            $("#totalPoint").val(totalPoint);
        }


        //显示已选选择题
        function showChooseQuestion() {
            $("#containChooseQuestion").toggle();
        }

        //显示已选判断题
        function showJudgementQuestion() {
            $("#containJudgementQuestion").toggle();
        }
    </script>
